<template>
    <div class="add-student-page">
        <div class="alert">
            <div class="alert-box">
                <h2>转班</h2>
                <i class="el-icon-close close" @click="cancel"></i>
                <el-form ref="form" :model="form" label-width="60px" class="add-class-form">
                    <el-form-item label="原班级">
                        <el-input v-model="form.oldClass"></el-input>
                    </el-form-item>
                    <el-form-item label="新班级">
                        <el-select v-model="form.newClass" filterable placeholder="请选择新班级" class="select-block" @change="change">
                            <el-option :label="v.mc" :value="v.id + ''" v-for="v in classList"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-table 
                    :data="addStudentList" 
                    border stripe align="center" 
                    class="admin-table" 
                    @selection-change="handleSelectionChange"
                    @select="checkSelect" 
                    @select-all="checkall">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column :prop="v.prop" :label="v.label" v-for="(v,index) in studentTitleList" align="center" min-width="130" show-overflow-tooltip></el-table-column>
                </el-table>
                <div class="btn">
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="cancel" type="text">取消</el-button>
                </div>
            </div>
        </div>
        <LoadingComponent v-if="isLoading"></LoadingComponent>
    </div>
</template>

<script type="text/javascript">
    import LoadingComponent from 'components/loading'
    export default {
        components: { LoadingComponent },
        props: ['params'],
        data () {
            return {
                isLoading:false,
                classList:[],
                multipleDelNum: [],
                classid: '',
                form: {
                    oldClass: '',
                    newClass: ''
                },
                studentTitleList: [
                    {
                        prop: 'dh',
                        label: '学生手机号'
                    },
                    {
                        prop: 'zwm',
                        label: '学生名称'
                    },
                    {
                        prop: 'ywm',
                        label: '学生英文名称'
                    }
                ],
                addStudentList: [
                    {
                        studnetPhone: 123456789,
                        studentNme: '陈冬',
                        studentEnglishName: 'chendong'
                    },
                    {
                        studnetPhone: 123456789,
                        studentNme: '陈冬',
                        studentEnglishName: 'chendong'
                    },
                    {
                        studnetPhone: 123456789,
                        studentNme: '陈冬',
                        studentEnglishName: 'chendong'
                    },
                    {
                        studnetPhone: 123456789,
                        studentNme: '陈冬',
                        studentEnglishName: 'chendong'
                    }
                ]
            }
        },
        created () {
            console.log(this.params)
            this.form.oldClass = this.params.row.mc
            this.getClass()
            this.getStudent()
        },
        methods: {
            handleSelectionChange(val) {
                // this.multipleSelection = val;
                console.log(val)
            },
            change (val) {
                   console.log(val)
                this.classid = val;
            },
            submit () {
                this.isLoading = true;

                this.axios.get(this.$store.state.api + 'xs/zb', {
                    params: {
                        bjid:this.classid,
                        xsid:this.multipleDelNum
                    }
                }).then( res => {
                    console.log(res)
                }).catch( res => {
                    console.log(res)
                })

                this.isLoading = false;
                this.$emit('close',{type:'change',cancel:false})
            },
            cancel () {
              this.$emit('close',{type:'change',cancel:true})
            },
            checkSelect (selection, row) {//点击单选select触发事件
                console.log(selection, row)
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
                console.log(this.multipleDelNum)
            },
            checkall (selection) {//点击全选select触发事件
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                // console.log(strID.join(","))
                this.multipleDelNum = strID.join(",");
                // console.log(strID)
                console.log(this.multipleDelNum)
            },
            getClass () {
                this.axios.get(this.$store.state.api + 'bj/listbj').then( res => {
                    console.log(res)
                    this.classList = res.data.data
                }).catch( res => {
                    console.log(res)
                })
            },
            getStudent (val) {
                console.log(val)
                this.axios.get(this.$store.state.api + 'xs/listxs',{
                    params: {
                        bjid: this.params.row.id
                    }
                }).then( res => {
                    console.log(res)
                    // this.classList = res.data.data
                    this.addStudentList = res.data.data.list;
                    console.log(this.addStudentList)
                }).catch( res => {
                    console.log(res)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .add-student-page {
        -moz-box-shadow:0px 0px 20px #969696;          /*firefox*/
        -webkit-box-shadow:0px 0px 20px #969696;      /*webkit*/
        box-shadow:0px 0px 20px #969696; 
        padding:30px 50px;

        .add-class-form {
            width:100%;
            // margin:0 auto;

            .select-block{
                display: block;
            }
        }

        .btn{
            text-align: center;
            margin:30px 0 0 0;

            button:nth-child(1) {
                width: 100px;
            }
        }
        h2{
            line-height: 30px;
        }
    }
</style>